<template>
    <div class="product-detail-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>商品详情</span>
            <el-tag :type="product.status === '上架中' ? 'success' : 'danger'">
              {{ product.status }}
            </el-tag>
          </div>
        </template>
  
        <el-row :gutter="20">
          <el-col :span="8">
            <el-image 
              :src="product.image || 'https://via.placeholder.com/300'" 
              fit="cover"
              style="width: 100%; height: 300px;"
            />
          </el-col>
          <el-col :span="16">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="商品名称">{{ product.name }}</el-descriptions-item>
              <el-descriptions-item label="商品价格">¥{{ product.price }}</el-descriptions-item>
              <el-descriptions-item label="商品分类">{{ product.category }}</el-descriptions-item>
              <el-descriptions-item label="当前库存">{{ product.currentStock }}</el-descriptions-item>
              <el-descriptions-item label="商品描述">{{ product.description || '暂无描述' }}</el-descriptions-item>
            </el-descriptions>
  
            <div class="action-buttons" style="margin-top: 20px;">
              <el-button 
                v-if="product.status === '上架中'" 
                type="danger" 
                @click="handleOffline"
              >下架商品</el-button>
              <el-button 
                v-if="product.status === '下架中'" 
                type="success" 
                @click="handleOnline"
              >上架商品</el-button>
              <el-button type="primary" @click="showEditDialog">编辑商品</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
      // 在模板中添加编辑对话框
<el-dialog 
  title="编辑商品信息" 
  v-model="editDialogVisible"
  width="50%"
>
  <el-form :model="editForm" label-width="100px">
    <el-form-item label="商品名称">
      <el-input v-model="editForm.name" />
    </el-form-item>
    <el-form-item label="商品价格">
      <el-input-number v-model="editForm.price" :min="0.01" :step="0.01" />
    </el-form-item>
    <el-form-item label="商品分类">
      <el-select v-model="editForm.category">
        <el-option label="电子产品" value="电子产品" />
        <el-option label="日用品" value="日用品" />
        <el-option label="食品" value="食品" />
      </el-select>
    </el-form-item>
    <el-form-item label="当前库存">
      <el-input-number v-model="editForm.currentStock" :min="0" />
    </el-form-item>
    <el-form-item label="商品描述">
      <el-input v-model="editForm.description" type="textarea" />
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="editDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="handleEdit">确认</el-button>
  </template>
</el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted,reactive } from 'vue'
  import { useRoute } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { goodsApi } from '@/api/goods'
  
  const route = useRoute()
  const product = ref({
    name: '',
    price: 0,
    category: '',
    currentStock: 0,
    status: '',
    description: '',
    image: ''
  })
  
  // 编辑商品对话框状态
const editDialogVisible = ref(false)
const editForm = reactive({
  name: product.value.name,
  price: product.value.price,
  category: product.value.category,
  currentStock: product.value.currentStock,
  description: product.value.description
})

// 编辑商品
// 由于存在重复声明的问题，这里注释掉原有的重复函数定义，保留下面完整的异步处理函数
// const handleEdit = async () => {



  // 获取商品详情
  const fetchProductDetail = async () => {
    try {
      const res = await goodsApi.getProductDetail(route.params.id)
      product.value = res
    } catch (err) {
      ElMessage.error(err.response?.data?.message || '获取商品详情失败')
    }
  }
  
  // 下架商品
  const handleOffline = async () => {
    try {
      await goodsApi.offlineProduct(route.params.id)
      ElMessage.success('商品已下架')
      await fetchProductDetail()
    } catch (err) {
      ElMessage.error(err.response?.data?.message || '下架失败')
    }
  }
  
  // 上架商品
  const handleOnline = async () => {
    try {
      await goodsApi.reOnlineProduct(route.params.id)
      ElMessage.success('商品已上架')
      await fetchProductDetail()
    } catch (err) {
      ElMessage.error(err.response?.data?.message || '上架失败')
    }
  }
  
  // 显示 编辑框
 const showEditDialog = () => {
    editDialogVisible.value = true
    // 初始化编辑表单数据
    editForm.name = product.value.name
    editForm.price = product.value.price
    editForm.category = product.value.category
    editForm.currentStock = product.value.currentStock
    editForm.description = product.value.description
  }
  // 编辑商品


  // 编辑商品
  const handleEdit = async () => {
    // 这里可以跳转到编辑页面或打开编辑对话框
    try {
    await goodsApi.updateProduct(route.params.id, editForm)
    ElMessage.success('商品信息更新成功')
    editDialogVisible.value = false
    await fetchProductDetail() // 刷新详情数据
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '更新失败')
  }

  }
  
  onMounted(() => {
    fetchProductDetail()
  })
  </script>
  
  <style scoped>
  .product-detail-container {
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .action-buttons {
    display: flex;
    gap: 10px;
  }
  </style>
  